<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>宁阳县天气预报</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            font-family: 'Roboto', 'Open Sans', sans-serif;
        }
        body {
            background-color: #0b78e1;
            color: #fff;
            padding: 20px;
            min-width: 1200px;
        }
        .weather-container {
            display: flex;
            flex-direction: column;
            gap: 30px;
        }
        .current-weather {
            display: flex;
            align-items: center;
            gap: 30px;
            margin-bottom: 20px;
        }
        .current-icon-temp {
            display: flex;
            flex-direction: column;
            align-items: center;
        }
        .current-icon {
            font-size: 80px;
            margin-bottom: 10px;
        }
        .current-temp {
            font-size: 60px;
            font-weight: bold;
        }
        .current-detail {
            display: flex;
            flex-direction: column;
            gap: 10px;
        }
        .city-time {
            h1 {
                font-size: 32px;
                margin-bottom: 8px;
            }
            .update-time {
                font-size: 16px;
                opacity: 0.8;
            }
        }
        .weather-meta {
            display: flex;
            gap: 20px;
            font-size: 18px;
        }
        .forecast-row {
            display: flex;
            gap: 20px;
            overflow-x: auto;
            padding-bottom: 10px;
        }
        .forecast-item {
            background-color: rgba(255, 255, 255, 0.1);
            border-radius: 8px;
            padding: 15px;
            min-width: 120px;
            text-align: center;
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 8px;
        }
        .forecast-date {
            font-size: 16px;
            font-weight: 500;
        }
        .forecast-week {
            font-size: 14px;
            opacity: 0.8;
        }
        .forecast-icon {
            font-size: 30px;
            margin: 5px 0;
        }
        .forecast-weather {
            font-size: 14px;
        }
        .forecast-temp {
            font-size: 16px;
            font-weight: bold;
        }
        .forecast-wind {
            font-size: 14px;
            opacity: 0.8;
        }
    </style>
</head>
<body>
    <div class="weather-container">
        <div class="current-weather">
            <div class="current-icon-temp">
                <div class="current-icon" id="currentIcon">❓</div>
                <div class="current-temp" id="currentTemp">-</div>
            </div>
            <div class="current-detail">
                <div class="city-time">
                    <h1 id="cityName">宁阳县</h1>
                    <div class="update-time">更新时间：<span id="updateTime">-</span></div>
                </div>
                <div class="weather-meta">
                    <div>湿度：<span id="shidu">-</span></div>
                    <div>PM2.5：<span id="pm25">-</span> <span id="quality">-</span></div>
                    <div id="ganmao">-</div>
                </div>
            </div>
        </div>

        <div class="forecast-row" id="forecastRow">
            <!-- 未来7天天气将通过JS动态插入 -->
        </div>
    </div>

    <script>
        fetch('https://api.bugpk.com/api/weather?city=宁阳县')
            .then(response => response.json())
            .then(data => {
                if (data.code === 200) {
                    // 填充当前天气信息
                    document.getElementById('updateTime').textContent = data.cityInfo.updateTime;
                    document.getElementById('currentTemp').textContent = `${data.data.wendu}℃`;
                    document.getElementById('shidu').textContent = data.data.shidu;
                    document.getElementById('pm25').textContent = data.data.pm25;
                    document.getElementById('quality').textContent = `(${data.data.quality}污染)`;
                    document.getElementById('ganmao').textContent = data.data.ganmao;

                    // 天气图标映射
                    let currentIcon = '';
                    switch (data.data.forecast[0].type) {
                        case '晴': currentIcon = '☀️'; break;
                        case '多云': currentIcon = '⛅'; break;
                        case '霾': currentIcon = '🌫️'; break;
                        case '小雨': currentIcon = '🌧️'; break;
                        default: currentIcon = '❓';
                    }
                    document.getElementById('currentIcon').textContent = currentIcon;

                    // 填充未来7天天气预报
                    const forecastRow = document.getElementById('forecastRow');
                    const forecasts = data.data.forecast.slice(0, 7); // 只取前7天
                    
                    forecasts.forEach(day => {
                        // 天气图标映射
                        let forecastIcon = '';
                        switch (day.type) {
                            case '晴': forecastIcon = '☀️'; break;
                            case '多云': forecastIcon = '⛅'; break;
                            case '霾': forecastIcon = '🌫️'; break;
                            case '小雨': forecastIcon = '🌧️'; break;
                            default: forecastIcon = '❓';
                        }
                        
                        const forecastItem = document.createElement('div');
                        forecastItem.className = 'forecast-item';
                        forecastItem.innerHTML = `
                            <div class="forecast-date">${day.ymd.split('-')[2]}日</div>
                            <div class="forecast-week">${day.week}</div>
                            <div class="forecast-icon">${forecastIcon}</div>
                            <div class="forecast-weather">${day.type}</div>
                            <div class="forecast-temp">${day.low.replace('低温 ', '')} ~ ${day.high.replace('高温 ', '')}</div>
                            <div class="forecast-wind">${day.fx} ${day.fl}</div>
                        `;
                        forecastRow.appendChild(forecastItem);
                    });
                } else {
                    alert('获取天气数据失败：' + data.message);
                }
            })
            .catch(error => {
                console.error('API请求错误：', error);
                alert('获取天气数据时发生网络错误，请稍后重试');
            });
    </script>
</body>
</html>